<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
    <style>
        #root button {
            padding: 5px;
            margin: 5px;
        }

        #root button.active {
            background: red;
        }

        #root div {
            width: 500px;
            height: 200px;
            background: green;
        }
    </style>
</head>

<body>
    <!--指定挂载的位置-->
    <div id="root"></div>
    <script type="text/babel">
        class App extends React.Component {
            state={
                index:0,
                newsInfo:[]
            }

            render(){
                const {index,newsInfo} = this.state;
                return (
                    <>
                        <h3>切换</h3>
                                {
                                    newsInfo.map((item,idx)=>(
                                        <button onClick={()=>this.setState({index:idx})} className={index===idx?'active':''} key={idx}>{item.newsType}</button>
                                    ))
                                }
                                {
                                    newsInfo.map((item,idx)=>(
                                        <div style={{display:idx===index?'block':'none'}} key={idx}>{item.newsList.map(info=>(<p key={info.id}><a href={info.href}>{info.title}</a></p>))}</div>
                                    ))
                                }
                    </>
                )
            }

            componentDidMount() {
            // 当组件挂载完毕之后会调用该函数
                const xhr= new XMLHttpRequest();
                xhr.responseType = "json";
                xhr.open('get','./data/index.json');
                xhr.send();
                xhr.onload=()=>{
                    this.setState({
                        newsInfo:xhr.response
                    })
                }
            }
        }
        ReactDOM.createRoot(document.getElementById('root')).render(<App/>)
    </script>

</body>

</html>